<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>演示租户</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
            <div >
                <div class="header">
                    <nav class="navbar navbar-default" role="navigation" >
                    <div class="navbar-header" style="margin-left: 0px;padding-right: -100;padding-left: 35px;padding-top: 15px;">
                        <span style="color: #eaeff4;">贵州省民政厅</span>
                        <p style="font-size: 10px; color: #eaeff4;">DEPARTMENT OF CIVIL AFFAIRS OF GUIZHOU PROVINCE</p>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                 <div  style="margin-left: 20px;" >
                                    <button class="dropbtn" style="background: #3e4edd;">首页</button>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">业务图谱</button>
                                 <div class="dropdown-content">
                                    <a href="#">图谱可视化</a>
                                    <a href="#">本体管理</a>
                                    <a href="#">实体管理</a>
                                 </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">民政智库</button>
                                 <div class="dropdown-content">
                                    <a href="#">文件管理</a>
                                    <a href="#">知识检索</a>
                                 </div>
                                </div>
                           </li>
                           <li>
                            <div class="dropdown">
                                <button class="dropbtn">数据管理</button>
                             <div class="dropdown-content">
                                <a href="#">元数据管理</a>
                                <a href="#">主数据管理</a>
                                <a href="#">安全中心</a>
                                <a href="#">数据治理</a>
                                <a href="#">多维分析</a>
                                <a href="#">任务调度</a>
                                <a href="#">数据集成</a>
                                <a href="#">智能标注</a>
                                <a href="#">实时流分析</a>
                             </div>
                            </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">...</button>
                                 <div class="dropdown-content">
                                    <div  style="display: flex; flex-direction: row; justify-content:flex-start; width: 240px;">
                                        <button class="self-button" >数据超市</button>
                                    <div class="dropright-content">
                                        <a href="#">元数据管理</a>
                                        <a href="#">主数据管理</a>
                                    </div>
                                    </div>
                                    
                                    <button class="self-button">领导驾驶舱</button>
                                    <button class="self-button">服务与支持</button>
                                 </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <div  style="margin-left: 20px;" >
                                    <button class="dropbtn" style="font-size:14px;">欢迎您，user</button>
                                </div>
                            </li>
                            <li >
                                 <a class="self-icon " style=" padding-bottom: 24px;
                                 padding-top: 20px;">
                                     <span class="glyphicon glyphicon-bell " style="color: blanchedalmond; "></span>
                                 </a>
                            </li>
                            <li >
                                <a class="self-icon" style="    padding-bottom: 24px;
                                padding-top: 20px;">
                                    <span class="glyphicon glyphicon-cog " style="color: blanchedalmond;"></span>
                                </a>
                           </li>
                        </ul>
                    </div>
                    
                </nav>
                </div>
                <div class="middle">
                    <div style="position:relative">
                    <div class=" carousel slide" id="carousel-186585" style="position:absolute;left:0;top:0;z-index: -1;">
                    <ol class="carousel-indicators">
                        <li class="active" data-slide-to="0" data-target="#carousel-186585">
                        </li>
                        <li data-slide-to="1" data-target="#carousel-186585">
                        </li>
                    </ol>
                    <div class="carousel-inner" >
                        <div class="item active">
                            <img alt="" src="img/firstImg.jpg" style="height: 540px;"/>
                        </div>
                        <div class="item">
                            <img class="self-img" src="img/second.png" style="height: 540px;"/>
                        </div>
                    </div> 
                    </div>
                    <div style="position:absolute;left:0;top:0">
                        <div class="self-div">
                        <h5 style="font-size: 25px; color: #FFFFFF;">演示租户</h5>
                        <h2 style="margin-top: 0px; font-size: 40px; color: #FFFFFF;">政务业务数据管理平台</h2>
                        <span style="float: left;height: 50px;"><input style="width: 640px;height: 50px;" type="text"; placeholder="输入关键字搜索"></span>
                        <span><button style="
                        background: #4862fe;
                        text-align:center;
                        font-size: 20px;
                        color: #fff;
                        width: 100px;
                        height: 50px;
                        border-left-width: 0px;
                        border-top-width: 0px;
                        border-right-width: 0px;
                        border-bottom-width: 0px;
                        ">搜索</button></span>
                        <ul style="
                        
                        padding-left: 0px;
                        margin-top: 10px;
                    
                    ">
                            <li style="display: inline;  color: #FFFFFF;">
                                社会救助处
                            </li >
                            <img src="img/fire.png" style="height: 16px; width: 16px;">
                            <li class="self-li">
                                儿童福利处
                            </li>
                            <li class="self-li">
                                社会组织管理局
                            </li>
                            <li class="self-li">
                                社会事务处
                            </li>
                            <li class="self-li">
                                规划财务处
                            </li>
                        </ul>
                        </div>
                        <div style="    margin-left: 83px;
                        padding-top: 68px; ">
                        <div class="transbox" style="
                        margin-left: 200px;
                    ">
                            <span class="self-span">1076</span>
                            <h5 style="font-size: 19px; color: #FFFFFF; ">收集知识、政策文件</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">1</span>
                            <h5 style="font-size: 19px; color: #FFFFFF;">开放API</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">1980</span>
                            <h5 style="font-size: 19px; color: #FFFFFF;">业务实体</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">2277</span>
                            <h5 style="font-size: 19px; color: #FFFFFF;">业务实体关系数</h5>
                        </div>
                        <div class="transbox">
                            <span class="self-span">14</span>
                            <h5 style="font-size: 19px; color: #FFFFFF;">知识图谱</h5>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div style="height: 580px;">
                    </div>
                    <div>

                    </div>
                    <div>

                    </div>
                    <div>

                    </div>
                </div>
                <div class="footer">

                </div>
            </div>
</body>
<style>
    .self-span {
        font-size: 32px; 
        color: white;
    }
    .self-div {
    margin-left: 83px;
    padding-top: 68px;
    }

    div.transbox {
        padding-top: 15px;
  background-color:hsla(0,0%,100%,.1);
  width: 186px;
  height: 120px;
float: left;
text-align: center;
}

    .self-li {   
    margin-left: 20px;
        display: inline;  
        color: #FFFFFF;
    }
.navbar {
    position: sticky;
    background-color: #2e43b7;
    margin-bottom: 0px;
    left: auto;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-radius:0%;
    border-left-width: 0px;
    border-right-width: 0px;
    z-index:3;
}
.self-img {
    height: 540px;
}
.self-icon {
    font-size: 17px;
    padding-bottom: 24px;
    padding-top: 20px;
}

.dropbtn {
background-color: #2e43b7;
color: #eaeff4;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-bottom-width: 10px;
    margin-bottom: 0px;
    padding-bottom: 24px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 20px;
}  

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.dropright-content {
display: none;
position: absolute;
background-color: #0B2161;
width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1;
}

.self-button {
    width: 120px;
    background: none;
    color: #eaeff4;
    border: none;
    padding: 12px 16px;
text-decoration: none;
display: block;
}

.self-button:hover{
    background-color: #2e43b7
}

.dropdown-content a {
color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;

}  

.dropright-content a{
    color: #eaeff4;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropright-content a:hover{
    background-color: #2e43b7
}

.dropdown-content a:hover {
background-color: #2e43b7
} 

.dropdown:hover .dropdown-content {
display: block;
}  

.dropdown:hover .dropbtn {
background-color: #373ad4;
}

</style>
</html>
